<template>
    <div id="MenuManagement">
        <div>
            <el-card class="box-card">
                <el-row>
                    <el-col :span="8"> 
                        <el-input
                            placeholder="请输入内容"
                            v-model="menuName"
                            clearable>
                            </el-input>
                    </el-col>
                    <el-col :span="3" :push="1"><el-button icon="el-icon-search" @click="getMenuAllListByPage" circle></el-button><el-button type="primary" @click="addProduct" round>新增</el-button></el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-table
                            :data="data"
                            v-loading="loading"
                            style="width: 100%;margin-bottom: 20px;"
                            row-key="id"
                            border
                            default-expand-all
                            :tree-props="{children: 'childs', hasChildren: 'hasChildren'}">
                            <el-table-column
                            prop="menuName"
                            label="菜单名称"
                            sortable
                            width="180">
                            <template slot-scope="scope">
                                <e-icon :icon-name="scope.row.icon"/>
                                {{scope.row.menuName}}
                            </template>
                            </el-table-column>
                            <el-table-column
                            prop="menuAddress"
                            label="菜单地址"
                            sortable
                            width="180">
                            </el-table-column>
                            <el-table-column
                            prop="remarks"
                            label="备注"
                            >
                            </el-table-column>
                            <el-table-column
                            fixed="right"
                            label="操作"
                            width="200">
                            <template slot-scope="scope">
                                <el-button @click="handleClick(scope.row)" type="text" size="small" >查看</el-button>
                                <el-button @click="handleUpdate(scope.row)" type="text" size="small">编辑</el-button>
                                <el-button @click="deleteMenu(scope.row)" type="text" size="small" style="color: red;">删除</el-button>
                            </template>
                            </el-table-column>
                        </el-table>
                    </el-col>
                </el-row>
                <el-row style="text-align: center;">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage4"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="10"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="tatal">
                    </el-pagination>          
                </el-row>
            </el-card>
            <!-- 数据新增功能 -->
            <el-dialog title="新增菜单" :visible.sync="dialogFormVisible" @close="handleClose('productForm')">
                <el-form :model="productForm" :rules="rules" ref="productForm">
                    <el-dialog title="上级菜单" :visible.sync="parentTreeDialogFormVisible" width="20%"
                        append-to-body>
                            <el-tree 
                            :data="data" 
                            :props="defaultProps" 
                            @node-click="handleNodeClick"
                            >
                            </el-tree>
                    </el-dialog>
                    <el-form-item label="上级菜单" :label-width="formLabelWidth">
                    <el-input v-model="productForm.parentName" autocomplete="off" :disabled="true" style="width:70%"></el-input>
                    <el-button type="primary" @click="parentTreeDialogFormVisible = true" plain>上级</el-button>
                </el-form-item>
                <el-form-item label="菜单名称" :label-width="formLabelWidth" prop="menuName">
                    <el-input v-model="productForm.menuName" autocomplete="off"></el-input>
                </el-form-item>    
                <el-form-item label="菜单图标" :label-width="formLabelWidth">
                    <div style="margin: 0 auto;width: 500px">
                        <e-icon-picker v-model="productForm.icon"/>
                    </div>
                </el-form-item>  
                <el-form-item label="菜单地址" :label-width="formLabelWidth">
                    <el-input v-model="productForm.menuAddress" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="备注" :label-width="formLabelWidth" prop="remarks">
                    <el-input v-model="productForm.remarks" autocomplete="off"></el-input>
                </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveMenu('productForm')">确 定</el-button>
                </div>
            </el-dialog>
            <!-- 数据查看功能 -->
            <el-dialog title="查看菜单" :visible.sync="dialogFormVisibleDatil">
                <el-form :model="productFormList">
                        <el-dialog title="上级菜单" :visible.sync="parentTreeDialogFormVisible" width="20%"
                            append-to-body>
                                <el-tree 
                                :data="data" 
                                :props="defaultProps" 
                                @node-click="handleNodeClick"
                                >
                                </el-tree>
                        </el-dialog>
                        <el-form-item label="上级菜单" :label-width="formLabelWidth">
                        <el-input v-model="productFormList.parentName" autocomplete="off" :disabled="true" style="width:70%"></el-input>
                        <el-button type="primary" @click="parentTreeDialogFormVisible = true" plain>上传</el-button>
                    </el-form-item>
                    <el-form-item label="菜单名称" :label-width="formLabelWidth">
                        <el-input v-model="productFormList.menuName" autocomplete="off" :disabled="true"></el-input>
                    </el-form-item>    
                    <el-form-item label="菜单图标" :label-width="formLabelWidth">
                        <div style="margin: 0 auto;width: 500px" >
                            <e-icon-picker :disabled="true" v-model="productFormList.icon"/>
                        </div>
                    </el-form-item>  
                    <el-form-item label="菜单地址" :label-width="formLabelWidth">
                        <el-input v-model="productFormList.menuAddress" autocomplete="off" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="备注" :label-width="formLabelWidth">
                        <el-input v-model="productFormList.remarks" autocomplete="off" :disabled="true"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisibleDatil = false">关闭</el-button>
                </div>
            </el-dialog>
            <!-- 数据修改功能 -->
            <el-dialog title="查看商品" :visible.sync="dialogFormVisibleUpdate">
            <el-form :model="productFormEdit">
                    <el-dialog title="上级类型" :visible.sync="parentTreeDialogFormVisible" width="20%" append-to-body>
                    <el-tree 
                    :data="data" 
                    :props="defaultProps" 
                    @node-click="handleNodeClick"
                    >
                    </el-tree>
                </el-dialog>
                <el-form-item label="父类名称" :label-width="formLabelWidth">
                    <el-input v-model="productFormEdit.parentName" autocomplete="off" :disabled="true" style="width:70%"></el-input>
                    <el-button type="primary" @click="parentTreeDialogFormVisible = true" plain>上级</el-button>
                </el-form-item>
                <el-form-item label="菜单图标" :label-width="formLabelWidth">
                    <div style="margin: 0 auto;width: 500px">
                        <e-icon-picker v-model="productFormEdit.icon"/>
                    </div>
                </el-form-item>  
                <el-form-item label="菜单名称" :label-width="formLabelWidth">
                    <el-input v-model="productFormEdit.menuName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="菜单地址" :label-width="formLabelWidth">
                    <el-input v-model="productFormEdit.menuAddress" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="备注" :label-width="formLabelWidth">
                    <el-input v-model="productFormEdit.remarks" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisibleUpdate = false">取 消</el-button>
                    <el-button type="primary" @click="updateMenu">确 定</el-button>
            </div>
            </el-dialog>
        </div>
    </div>
</template>
<script>
const axios = require('axios');
export default {
   name: 'MenuManagement',
        data(){
            //新增弹窗检查菜单名称是否为空
            var menuName = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入菜单名称'));
                } else {
                	callback();
                }
            };
            //新增弹窗检查备注是否为空
            var remarks = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入备注'));
                } else {
                	callback();
                }
            };
                return {
                    loading:true,  //初始化加载效果
                    menuName:"", //模糊查存放的值
                    productData: [],//分页全查结果集合
                    dialogFormVisible: false,//新增弹框true弹出
                    dialogFormVisibleDatil:false,//查看弹框true弹出
                    dialogFormVisibleUpdate:false,//修改弹框true弹出
                    parentTreeDialogFormVisible:false,
                    productForm: {// 新增时使用到的form对象
                        id:"",
                        menuName:"",
                        menuAddress:"",
                        remarks:"",
                        parentId:0,
                        parentName:"",
                        icon:""
                    },
                    productFormList:{//查看时使用到的form对象
                        id:"",
                        productName:"",
                        price:"",
                        details:"",
                        comment:"",
                        shop:"",
                        createTime:""
                    },
                    productFormEdit:{// 修改时使用到的form对象
                          id:"",
                        menuName:"",
                        menuAddress:"",
                        remarks:"",
                        sortNum:"",
                        parentId:"",
                        parentName:"",
                        icon:""
                    },
                    formLabelWidth: '120px',
                    currentPage4: 1,//分页当前选中页
                    page:{
                      pageSize:10,//条数
                      pageNum:1//页数
                    },
                    tatal:0,
                     data: [],
                     defaultProps: {
                        children: 'childs',
                        label: 'menuName'
                    },
                    icon:"",
                     //新增门票校验规则
                    rules: {
                        menuName: [
                            { validator: menuName, trigger: 'blur' }
                        ],
                        remarks:[
                            { validator: remarks, trigger: 'blur' }
                        ],
                    },
                }
            },
        //初始化加载数据
        mounted(){
            this.getMenuAllListByPage()//分页全查
            this.getMenuTree()//菜单遍历全查
        }, 
        methods:{
             //新增清空值
            handleClose(formName) {
                this.$refs[formName].resetFields()// 重置数据，同时也取消了表单的校验 refundFormData：el-form用ref绑定的值，
            },
            //查询所有菜单
            getMenuTree(){
              axios.get("http://127.0.0.1:8082/menu/getMenuTree").then(res=>{
                this.data=res.data.obj
              }).catch(error => {
                        this.$message.error('服务器崩溃了，请稍后再尝试使用！');
                    })
            },
            handleNodeClick(data){
                this.productForm.parentName=data.menuName
                this.productForm.parentId=data.id
                this.productFormEdit.parentName=data.menuName
                this.productFormEdit.parentId=data.id
                this.parentTreeDialogFormVisible=false
            },
            // 分页
            handleSizeChange(ps) {
              this.page.pageSize=ps;
              this.getMenuAllListByPage()
              console.log(`每页 ${val} 条`);
             },
            handleCurrentChange(pn) {
              this.page.pageNum=pn;
              this.getMenuAllListByPage()
             console.log(`当前页: ${val}`);
            },
            filterNode(value, data) {
            if (!value) return true;
            return data.departmentName.indexOf(value) !== -1;
          },
            //分页全查+模糊查（菜单名称）  
            getMenuAllListByPage(){
                  
                  axios.get("http://127.0.0.1:8082/menu/getMenuAllListByPage",
                  {
                    params:{
                      pageSize:this.page.pageSize,
                      pageNum:this.page.pageNum
                    }
                  })
                  .then(res=>{
                    this.loading=false
                    this.productData=res.data.content
                    this.tatal=res.data.total
                  }).catch(error => {
                        this.$message.error('服务器崩溃了，请稍后再尝试使用！');
                    })

                },
            //新增菜单
            saveMenu(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        axios.post("http://127.0.0.1:8082/menu/saveMenu",this.productForm).
                        then(res => {
                            if(res.data.code="200"){
                                this.message("恭喜你，保存数据成功！","success")
                                this.getMenuTree()
                                this.getMenuAllListByPage()
                                this.dialogFormVisible = false
                                this.productForm={
                                    menuName:"",
                                    menuAddress:"",
                                    remarks:"",
                                    parentId:0,
                                    parentName:"",
                                    icon:""
                                }
                            }else{
                                this.message("对不起，保存失败！","warning")
                            }
                        //  }
                            }).catch(error => {
                                this.$message.error('服务器崩溃了，请稍后再尝试使用！');
                        })
                    } else {
                        return false;
                    }
                });
            },
            //修改菜单
            updateMenu(){
                axios.put("http://127.0.0.1:8082/menu/updateMenu",this.productFormEdit)
                .then(res=>{
                if(res.data.code="200"){
                    this.message("恭喜你，修改数据成功！","success")
                        this.dialogFormVisibleUpdate = false
                        this.getMenuAllListByPage();
                        this.getMenuTree();// 重新渲染数据列表
                }else{
                        this.message("对不起，修改失败！","warning")
                    }
                }).catch(error => {
                    this.$message.error('服务器崩溃了，请稍后再尝试使用！');
                })
            },
            //删除菜单
            deleteMenu(row){
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }//删除提示框
                ).then(() => {
                    axios.delete("http://127.0.0.1:8082/menu/deleteMenu?id="+row.id)
                .then(res =>{
                    if(res.data.flag){
                        this.getMenuTree()
                        this.getMenuAllListByPage()
                    }else{
                        this.message('删除失败','warning')
                    }
                }).catch(error =>{
                        alert(error)
                })
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
                });
            },
            //消息提示框
            message(message,type){
                this.$message({
                    message:message,
                    type: type
                });
            },
            //查看按钮回显
            handleClick(row){
                this.dialogFormVisibleDatil = true
                this.productFormList=row
            },
             //修改按钮回显
            handleUpdate(row){
                this.dialogFormVisibleUpdate=true
                this.productFormEdit.id = row.id
                this.productFormEdit.parentName=row.parentName
                this.productFormEdit.menuName=row.menuName
                this.productFormEdit.menuAddress=row.menuAddress
                this.productFormEdit.remarks=row.remarks
                this.productFormEdit.sortNum=row.sortNum
                this.productFormEdit.icon = row.icon
            },
            //新增按钮弹框
            addProduct(){
                this.dialogFormVisible = true
            }
        },
}
</script>
<style>
/**
        * 附件上传样式
        */
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
        .el-dropdown-link {
          cursor: pointer;
          color: #409EFF;
      }
        .el-icon-arrow-down {
        font-size: 12px;
     }
</style>